<template>
	<view>
		<!-- 头部 -->
		<view class="header">
			<!--  -->
			<text class="mess">{{info.tag.abMessage}}</text>
			<text class="info">
				<text>#{{info.tag.abName}}</text>
				<text>浏览:{{info.tag.abLook}}</text>
				<text>张数:{{length}}</text>
			</text>
			
		</view>
		<view class="box">
			<view class="cord" v-for="item in ascyNodes">
				
					<view class="top" style="position: relative;">
						<navigator style="width: 100%;height: 100%;position: absolute;z-index: 99;opacity: 0;" :url="'/pages/details/details?id='+item.nodeId"></navigator>
						<image :src="item.nodeImages" style="width: 100%;height: 100%;border-radius: 15rpx;"></image>
			
					</view>
				<view style="text-align: right;font-size: 25rpx;margin-right: 15rpx;margin-top: 45rpx;">
					热度:{{item.nodeLook}}</view>
				
			</view>
			<view class="cord"></view>
		</view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				abId:0,
				info: {
					tag: {
						abName: null,
						abLook: null,
						abMessage: null,
					},
					node: [{
						nodeId: null,
						nodeImages: null,
						nodeLook: null
					}],
				},
				length:0,
				ascyNodes:[],
				index:0
			}
		},
		onShareAppMessage(res) {
			return {
			   title: this.info.tag.abName,			  
			   path: "/pages/album/album?abId="+this.abId
			}
		},
		onReachBottom() {
			for(var i =this.index;i<this.index+5;i++){
				this.ascyNodes.push(this.info.node[i])
				
			}
			this.index+=5;
			
		},
		onShow() {
			uni.showTabBar()
		},
		onLoad(va) {
			this.abId=va.abId
		},
		onReady() {
			var that = this
			uni.request({
				url:"https://app.waghost.com/api/album/albumdetails/"+that.abId,
				method:"GET",
				success(va) {
					that.length = va.data.data.node.length
					that.info = va.data.data
					for(var i =0;i<5;i++){
						that.ascyNodes.push(that.info.node[i])
					}
					that.index+=5;
				}
				
			})
		},
		methods: {
			
		}
	}
</script>
	
<style scoped>
	.header{
		width: 100%;
		height: 300rpx;
		/* background: #007AFF; */
		border-bottom: 1px solid #C0C0C0;
	}
	.header>.mess{
		display: block;
		text-align: center;
		line-height: 200rpx;
	}
	.info{
		line-height: 130rpx;
		font-size: 30rpx;
		margin-left: 15rpx;
	}
	.info text{
		margin-left: 15rpx;
	}
	.box{
		margin-top: 15rpx;
		width: 100%;
		padding: 15rpx;
		height: auto;
		box-sizing: border-box;
		/* background: #007AFF; */
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
	}
	.cord{
		width: 45%;
		height: 350rpx;
		background-color: #ffffff;
		box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
		border-radius: 15rpx;
		margin-top: 20rpx;
	}
	.cord>.top{
		width: 100%;
		height: 250rpx;
		padding: 15rpx;
		box-sizing: border-box;
	}
	
</style>
